<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    /**
     * 类似于 CSS 中处理按钮等小图标的技巧,
     * 将很多的效果图集中在一张 png 格式的背景透明的图片中,
     * 这样可以提高效率也便于维护. 那么 drawImage 同样支持该方式绘图.
     * 在画布中的指定位子与指定区域内, 绘制图片中的某个矩形区.
     *
     * 语法: CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )
     * ctx.drawImage( img, 100, 100, 300, 200,  100, 100, 300, 200 );
     * 将图片的 ( 100, 100, 300, 200 ) 处的内容绘制到页面的 ( 100, 100, 300, 200 ) 的位置.
     */
</script>
</body>
</html>